<template>
	<view class="language-settings-container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-left" @click="goBack">
				<u-icon name="arrow-left" size="24" color="#333"></u-icon>
			</view>
			<view class="navbar-title">设置语言</view>
			<view class="navbar-right">
				<u-icon name="more-dot-fill" size="24" color="#333"></u-icon>
			</view>
		</view>
		
		<!-- 语言选择列表 -->
		<view class="language-list">
			<!-- 中文选项 -->
			<view 
				class="language-item" 
				:class="{'language-selected': currentLanguage === 'zh-CN'}"
				@click="selectLanguage('zh-CN')"
			>
				<text class="language-name">中文</text>
				<view class="check-icon" v-if="currentLanguage === 'zh-CN'">
					<u-icon name="checkmark" size="24" color="#ff3742"></u-icon>
				</view>
			</view>
			
			<!-- 英文选项 -->
			<view 
				class="language-item" 
				:class="{'language-selected': currentLanguage === 'en-US'}"
				@click="selectLanguage('en-US')"
			>
				<text class="language-name">English</text>
				<view class="check-icon" v-if="currentLanguage === 'en-US'">
					<u-icon name="checkmark" size="24" color="#ff3742"></u-icon>
				</view>
			</view>
		</view>
		
		<!-- 完成按钮 -->
		<view class="complete-btn-container">
			<u-button 
				type="error" 
				text="完成" 
				@click="saveLanguageSetting"
				class="complete-btn"
			></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 当前选择的语言
				currentLanguage: 'zh-CN'
			}
		},
		onLoad() {
			// 加载已保存的语言设置
			this.loadLanguageSetting();
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 选择语言
			selectLanguage(language) {
				this.currentLanguage = language;
			},
			
			// 加载语言设置
			loadLanguageSetting() {
				const savedLanguage = uni.getStorageSync('appLanguage');
				if (savedLanguage) {
					this.currentLanguage = savedLanguage;
				} else {
					// 默认使用中文
					this.currentLanguage = 'zh-CN';
				}
			},
			
			// 保存语言设置
			saveLanguageSetting() {
				// 保存到本地存储
				uni.setStorageSync('appLanguage', this.currentLanguage);
				
				// 显示提示
				uni.showToast({
					title: '语言设置已保存',
					icon: 'success'
				});
				
				// 返回上一页
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		}
	}
</script>

<style lang="scss" scoped>
.language-settings-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
	
	// 自定义导航栏
	.custom-navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 88rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		
		.navbar-left {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.navbar-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
		}
		
		.navbar-right {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	
	// 语言选择列表
	.language-list {
		background-color: #fff;
		margin-top: 20rpx;
		
		.language-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			&:active {
				background-color: #f8f8f8;
			}
			
			.language-name {
				font-size: 32rpx;
				color: #333;
			}
			
			.check-icon {
				width: 40rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			&.language-selected {
				.language-name {
					color: #ff3742;
				}
			}
		}
	}
	
	// 完成按钮
	.complete-btn-container {
		padding: 40rpx;
		margin-top: auto;
		
		.complete-btn {
			width: 100%;
			height: 88rpx;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: 500;
			background: linear-gradient(135deg, #ff4757, #ff3742);
			border: none;
			
			&:active {
				transform: scale(0.98);
			}
		}
	}
}
</style>